<template>
<div class="score-design">
  <div class="content">
    <el-input v-model="text" placeholder="分数描述" resize="both" @change="changeText"></el-input>
    <el-input-number v-model="grade" @change="changeGrade" :step="1" step-strictly label="分数"></el-input-number> 
  </div>
  <div class="actions">
    <div class="action">
      <insert-option @addOption="addOption"></insert-option>
      <delete-option @deleteOption="deleteOption"></delete-option>
    </div>
    <div class="action">
      <up @upmove="upmove"></up>
      <down @downmove="downmove"></down>
    </div>
  </div>
</div>
  
</template>

<script>
import InsertOption from '../editbutton/InsertOption.vue'
import DeleteOption from '../editbutton/DeleteOption.vue'
import Up from '../editbutton/Up.vue'
import Down from '../editbutton/Down.vue'
export default {
  name:'ScoreDesign',
  data() {
   return {
   }
  },
  components: {
    InsertOption,
    DeleteOption,
    Up,
    Down,
  },
  emits: ['addOption', 'deleteOption', 'changeGrade', 'changeText', 'upmove', 'downmove'],
  methods: {
    addOption() {
      this.$emit('addOption')
    },
    deleteOption() {
      this.$emit('deleteOption')
    },
    changeGrade() {
      this.$emit('changeGrade', {grade: this.grade, index: this.index})
    },
    changeText() {
      this.$emit('changeText', {text: this.text, index: this.index})
    },
    upmove() {
      this.$emit('upmove', this.index)
    },
    downmove() {
      this.$emit('downmove', this.index)
    }
  },
  props: {
    text: {
      type: String,
      default: '',
    },
    grade: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    }
  },
  
}
</script>

<style scoped>

  .score-design {
    display: flex;
    align-items:center;
    justify-content:center;
    margin-top: 10px;
    padding: 10px;
    
  }

  .score-design:hover {
    box-shadow: 0 -4px 8px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.04)  
  }

  .content {
    flex: 1;
  }

  .el-input {
    margin-right:5px;
  }

  .actions {
    flex: 80px;
    margin-left: 10px;
  }

  .action {
    width: 70px;
    margin-top: 3px;
  }

  .el-input-number {
    margin-top: 10px;
    margin-right: 5px
  }
</style>